<template>
  <div ref="pages">
     <div class="tabview newsPageDiv" >
       <img src="@/assets/banner_waterdrop.png" />
       <Breadcrumb />
       <div>
         <span class="news-text">不良行为</span>       
         <!-- <div style="height:0.5px;width:100%;border-top:0.5px solid #ccc;float:left;margin-top:10px;margin-bottom:10px;"></div>          -->
         <a-divider style="margin-top:21px;margin-bottom:0px;" />
       </div>    
     <div class="badbehavior-list-div">
        <a-list item-layout="vertical" :loading="loading" size="large" :pagination="listData.length>0?pagination:false" :data-source="listData">
          <a-list-item slot="renderItem"  key="item.title" slot-scope="item,index" @click="onDetail(item,index)">
           
            <div class="badbehavior-list-text">
              <div class="badbehavior-list-text-one">{{((pageFilter.pageNo - 1) * pageFilter.pageSize +(index + 1))>9?(pageFilter.pageNo - 1) * pageFilter.pageSize +(index + 1) :'0' + (index + 1) }}</div>
              <div class="badbehavior-list-text-two badbehavior-list-text-one" :title="item.contentTitle">{{item.contentTitle}}</div>
              <div class="badbehavior-list-text-three"><span v-if="item.contentDatetime!=='' && item.contentDatetime!==null">{{ moment(item.contentDatetime).format('YYYY-MM-DD') }}</span></div>
            </div>
          </a-list-item>
        </a-list>
      </div>
    </div>
     <!-- <footerPage :style="{'margin-top': footMarginTop}" ></footerPage> -->
  </div>
</template>

<script>
// import footerPage from '../footer/footerPage'
import Breadcrumb from "@/components/base/tools/Breadcrumb";
import moment from "moment";
import emv from "@/views/center/emptyVue.vue";
import api from '@/api/index'
  export default {
    name: "badBehavior",
    inject:['changeTab'],
    components: {
    //  footerPage,
     Breadcrumb
    },
    props: {
      page: {
        type: String,
        default: '1'
      },
    },
     data(){
      return{
        clientHeight:'',
        screenHeight:'',
        footMarginTop:'',
        loading:false,
        listData:[
            // {
            //   xh:'01',
            //   title:'厅党组成员，陈德皎主持召开水务工程招投标突出问题及施工转包违法分包等违法行为专项整治专题会专题会会会',
            //   content: '8月22日上午，海南省水务系统200多名干部职工，来到海口市万绿园，开展“我健康、我快乐”健步走活动。环绕万绿园2圈，步行近5公里。为进一步推动省直机关全民健身活动常态化开展，不断增强省直机关广大干部职工的体健康水平，8月11日，海南省直属机关工会联合会发出《关于',
            //   time: '2020/07/28',
            // },
            // {
            //   xh:'02',
            //   title:'海南省水务厅、华北水利水电大学、海南热带海洋学院达成三方战略合作意向！',
            //   content: '',
            //   time: '2020/07/28',
            // },
            // {
            //   xh:'03',
            //   title:'省水文局联合美兰区下洋社区居委会共同开展“社区卫生大扫除”主题党日活动',
            //   content: '',
            //   time: '2020/07/28',
            // },
            // {
            //   xh:'04',
            //   title:'东方市委书记田丽霞、市长张长丰率队到省水务厅对接联系水务工作',
            //   content: '',
            //   time: '2020/07/28',
            // },
            // {
            //   xh:'05',
            //   title:'厅党组成员陈德皎主持召开水务工程招投标突出问题及施工转包违法分包等违法行为专项整治专题会11111',
            //   content: '',
            //  time: '2020/07/28',
            // },
            // {
            //   xh:'06',
            //   title:'厅党组成员陈德皎主持召开水务工程招投标突出问题及施工转包违法分包等违法行为专项整治专题会',
            //   content: '',
            //   time: '2020/07/28',
            // },
            // {
            //  xh:'07',
            //   title:'厅党组成员陈德皎主持召开水务工程招投标突出问题及施工转包违法分包等违法行为专项整治专题会',
            //   content: '',
            //   time: '2020/07/28',
            // },
            // {
            //   xh:'08',
            //   title:'厅党组成员陈德皎主持召开水务工程招投标突出问题及施工转包违法分包等违法行为专项整治专题会',
            //   content: '',
            //   time: '2020/07/28',
            // },
            // {
            //   xh:'09',
            //   title:'厅党组成员陈德皎主持召开水务工程招投标突出问题及施工转包违法分包等违法行为专项整治专题会',
            //   content: '',
            //   time: '2020/07/28',
            // },
            // {
            //   xh:'10',
            //   title:'厅党组成员陈德皎主持召开水务工程招投标突出问题及施工转包违法分包等违法行为专项整治专题会',
            //   content: '',
            //   time: '2020/07/28',
            // },
            // {
            //   xh:'11',
            //   title:'11111厅党组成员陈德皎主持召开水务工程招投标突出问题及施工转包违法分包等违法行为专项整治专题会',
            //   content: '',
            //   time: '2020/07/28',
            // },
          ],
        pageFilter: {
          contentCategoryId:"154",
          pageNo:1,
          pageSize:10 ,
        },
        pagination: {
          
          //   showQuickJumper: true,
          //   itemRender:this.itemRender,
          //   // total:50,
          //   defaultPageSize:10,
          //   // showSizeChanger:true,
          //   // pageSizeOptions: ['5', '10', '15', '20'],
          //   // onShowSizeChange:(current, pageSize)=> this.pageSize = pageSize,
          //  // showTotal: total => `共 ${Number((this.listData.length/10+1)).toFixed(0)} 页`,
        },
      }
      
    },
    mounted(){
      this.setFootStyle();

    },
    created(){
      this.changeTab(2,"badBehaviorPage","<span class=\"tab_name\">不良行为</span>");
      this.loading = true;
      this.get_list();
    },
    methods: {
      itemRender(current, type, originalElement) {
        if (type === 'prev') {
          return <a><i aria-label="图标: left" class="anticon anticon-left"><svg viewBox="64 64 896 896" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i>上一页</a>;
        } else if (type === 'next') {
          return <a>下一页<i aria-label="图标: right" class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a>;
        }
        return originalElement;
      },
      onDetail(item,index){
       this.$router.push({
          name:"newsDetail",
          query:{
            type:'detail',
            id:item.id,
            breadcrumbName:'不良行为',
            routerLikeTo:'/center/badBehaviorPage'
          }
      });
     },
    getScreenHeight(){
        // 获取浏览器可视区域高度
        this.screenHeight =    document.body.clientHeight ; //`${document.documentElement.clientHeight}` 
        window.onresize = function temp() {
          this.screenHeight = document.body.clientHeight;
       };
    },
    setFootStyle(){
        this.$nextTick(()=>{ // 页面渲染完成后的回调
                  this.getScreenHeight();
                  this.clientHeight = this.$refs.pages.offsetHeight+364;
                  // console.log(this.screenHeight,this.clientHeight);
                  if(this.screenHeight>this.clientHeight){
                    if(this.screenHeight-this.clientHeight>40){
                      emv.$emit("setfootmargintop",this.screenHeight-this.clientHeight);
                    }else{
                       emv.$emit("setfootmargintop",40);
                    }
                  }else{
                    emv.$emit("setfootmargintop",40);
                  }
                });

   },
     async get_list() {
        await api.get_news_list(this.pageFilter).then(res => {
            this.listData = res.rows;
            this.loading = false;
            this.pagination = {
              onChange: (page,pageSize) => { 
                 this.pageFilter= {
                  contentCategoryId:"154",
                  pageNo:page,
                  pageSize:pageSize ,
                };
                this.onListChange(this.pageFilter);
              },
              pageSize: this.pageFilter.pageSize,
              total:res.total,
              showQuickJumper: true,
              itemRender:this.itemRender,
            };
           
          })
          .catch(err => {
            this.loading = false;
          });
       
         this.setFootStyle();
      },
      onListChange(pageFilter) {
        this.pageFilter = pageFilter;
        this.get_list();
      },
   },
   
  };
</script>
<style lang="less">
.news-text{
  font-size: 26px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #337BD7;
}
.newsPageDiv > img {
  width: 100%;
  max-width: 100%;
  margin-top: -2.5px;
  height: 120px;
}
.badbehavior-list-div{
  // margin-left: -10px;
  // margin-top:12px;
  .ant-list-items {
    margin: 0;
    padding: 0;
    list-style: none;
    color: #fff;
    width: 100%;
   }
    .ant-list-split .ant-list-item {
      border-bottom: 1px dotted #ccc;
      // padding-bottom: 35px;
      padding-top: 30px;
      height: 78px;

    }
    .ant-pagination-options-quick-jumper {
      display: inline-block;
      height: 32px;
      line-height: 32px;
      vertical-align: top;
      color: #808080;
    }
    .ant-pagination-prev, .ant-pagination-next, .ant-pagination-jump-prev, .ant-pagination-jump-next {
      display: inline-block;
      min-width: 32px;
      height: 32px;
      color: rgba(0, 0, 0, 0.65);
      font-family: Arial;
      line-height: 32px;
      text-align: center;
      vertical-align: middle;
      list-style: none;
      border-radius: 4px;
      cursor: pointer;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
      border: 1px solid #d9d9d9;
      border-radius: 4px;
      padding-left: 10px;
      padding-right: 10px;
  }
  .ant-pagination-total-text {
    display: inline-block;
    height: 32px;
    margin-right: 8px;
    line-height: 30px;
    vertical-align: middle;
    color: #808080;
  }
  //  .badbehavior-list-text{
  //   color: #000;
  //   display: flex;
    .badbehavior-list-text-one{  
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333333;
      line-height: 21px;
      float: left;
    }
    .badbehavior-list-text-two{
      margin-left: 44px;
      width: 70%;
      text-overflow: ellipsis;  /*超出内容用省略号*/
      overflow: hidden; /*内容超出后隐藏*/
      white-space: nowrap; /*文本不进行换行*/
      float: left;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333333;
    }
    .badbehavior-list-text-three{
       width: 20%;
       text-align: right;
       font-size: 14px;
       font-family: Microsoft YaHei;
       font-weight: 400;
       color: #666666;
       line-height: 21px;
       float: left;
    }
  // }
}

 .badbehavior-list-text:hover{
   cursor: pointer;
   .badbehavior-list-text-one,.badbehavior-list-text-two,.badbehavior-list-text-three{
     color: #005AB5;
     font-weight: 600;
   }
 }
</style>